<template>
  <div class="show_data_reg">
    <div class="condi_reg"
         ref="condi_reg">
      <draggable @end="move">
        <el-dropdown v-for="item in list"
                     size="small"
                     :key="item.id">
          <el-button type="primary">
            {{item.text}}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item>双皮奶</el-dropdown-item>
            <el-dropdown-item>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </draggable>
      <div class="mask"
           v-if="showMase">
        拖动此处</div>
    </div>
    <div class="data_reg"
         ref="data_reg">
      <!-- <el-table :data="tableData"
                emptyText=" "
                border>
        <el-table-column v-for="item in tableProp"
                         :key="item.id"
                         :prop="item.prop"
                         :label="item.label">
        </el-table-column>
      </el-table> -->
      <div class="mask"
           v-if="showMase">
        拖动此处</div>
    </div>

    <el-dialog title="筛选"
               width="40%"
               :visible.sync="showDia">
      内容啊
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="showDia = false">取 消</el-button>
        <el-button type="primary"
                   @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import Bus from '@/utils/bus.js';
export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [],
      showMase: false,
      showDia: false,
      target: {},
      tableData: [
      ],
      tableProp: [
      ]
    }
  },
  methods: {
    move(e) {
      this.list = []
    },
    getArea(x, y) {
      let area = this.$refs.condi_reg.getBoundingClientRect();
      let condiX = area.x
      let condiY = area.y
      let condiX1 = area.x + area.width
      let condiY1 = area.y + area.height
      if (x < condiX || x > condiX1 || y < condiY || y > condiY1) {
        this.getArea2(x, y)
      } else {
        this.showDia = true
        this.handelArr()
        console.log("在范围内呢")
      }
    },
    getArea2(x, y) {
      let area = this.$refs.data_reg.getBoundingClientRect();
      let condiX = area.x
      let condiY = area.y
      let condiX1 = area.x + area.width
      let condiY1 = area.y + area.height
      if (x < condiX || x > condiX1 || y < condiY || y > condiY1) {
        console.log("不在范围内")
      } else {
        this.handelTable()
        console.log("在范围内呢222")
      }
    },
    handelArr() {
      this.list.push({ ...this.target })
    },
    handelTable() {

      this.tableProp.push({ id: this.target.id, prop: "date", label: this.target.text })

    },
    ok() {
      this.showDia = false
      console.log(this.showDia)
    }

  },
  mounted() {
    Bus.$on("getTarget", () => {
      this.showMase = true;
    })
    Bus.$on("cancelTarget", (e) => {
      this.showMase = false;
      console.log(e, "鼠标松开对象")
      console.log(e.clone.dataset.id, "拖拽id")
      console.log(e.clone.innerText, "拖拽text")
      this.target.id = e.clone.dataset.id
      this.target.text = e.clone.innerText
      let x = e.originalEvent.clientX
      let y = e.originalEvent.clientY
      console.log(e.originalEvent.clientX, "x轴坐标")
      console.log(e.originalEvent.clientY, "y轴坐标")
      this.getArea(x, y)
    })
  },

}
</script>
<style lang='scss' scoped>
.show_data_reg {
  height: 100%;
  width: 100%;
  .condi_reg {
    height: 100px;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }
  .data_reg {
    height: calc(100% - 100px);
    position: relative;
  }
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  border-bottom: 1px dashed #f1f1f1;
  background: black;
  opacity: 0.2;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
</style>